class Enlarge {
  constructor(el) {
    //1. 保存全局信息/初始化全局数据
    this.el = document.querySelector(el);
    this.imgObj = this.el.querySelector(".img");
    this.maskObj = this.el.querySelector(".mask");
    this.enlargeObj = this.el.querySelector(".enlarge");
    //2. 默认调用
    this.init();
  }
  //启动插件
  init() {
    //功能1
    //功能2
    this.maskMove();
    this.overOut();
    this.enlargeSetWH();
    // this.enlargeSetBg();
    // this.smallImgChange();
  }
  enlargeSetBg(left, top) {
    let enlargeW = parseFloat(this.getStyle(this.enlargeObj, "width"));
    let enlargeH = parseFloat(this.getStyle(this.enlargeObj, "height"));

    let maskW = parseInt(this.getStyle(this.maskObj, "width"));
    let maskH = parseInt(this.getStyle(this.maskObj, "height"));

    let x = (enlargeW / maskW) * left;
    let y = (enlargeH / maskH) * top;
    this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`;
  }
  //鼠标移动
  maskMove() {
    //步骤1 给img盒模型绑定鼠标移动事件
    this.imgObj.onmousemove = evt => {
      //2 事件处理函数中
      //2.1 同步mask遮罩框left和top
      let e = evt || window.event;
      let left =
        e.pageX -
        this.imgObj.parentNode.offsetLeft -
        this.maskObj.offsetWidth / 2;
      let top =
        e.pageY -
        this.imgObj.parentNode.offsetTop -
        this.maskObj.offsetHeight / 2;
      if (left < 0) left = 0;
      if (top < 0) top = 0;
      let maxLeft = this.imgObj.offsetWidth - this.maskObj.offsetWidth;
      let maxTop = this.imgObj.offsetHeight - this.maskObj.offsetHeight;
      if (left > maxLeft) left = maxLeft;
      if (top > maxTop) top = maxTop;
      this.maskObj.style.left = left + "px";
      this.maskObj.style.top = top + "px";
      //同化背景移动
      this.enlargeSetBg(left, top);
    };
  }
  getStyle(tagObj, attrName) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(tagObj)[attrName];
    } else {
      return tagObj.currentStyle[attrName];
    }
  }
  enlargeSetWH() {
    let maskW = parseInt(this.getStyle(this.maskObj, "width"));
    let maskH = parseInt(this.getStyle(this.maskObj, "height"));
    let enlarge = this.getStyle(this.enlargeObj, "background-size");
    let enlargeW = parseInt(enlarge.split(" ")[0]);
    let enlargeH = parseInt(enlarge.split(" ")[1]);
    let imgW = this.imgObj.clientWidth;
    let imgH = this.imgObj.clientWidth;
    this.enlargeObj.style.width = maskW * (enlargeW / imgW) + "px";
    this.enlargeObj.style.height = maskH * (enlargeH / imgH) + "px";
  }
  //鼠标在图片上移入移出
  overOut() {
    this.imgObj.onmouseover = () =>
      (this.maskObj.style.display = this.enlargeObj.style.display = "block");
    this.imgObj.onmouseout = () =>
      (this.maskObj.style.display = this.enlargeObj.style.display = "none");
  }
}
